<template>
  <!-- 项目经营-开票新增 4-4 -->
  <div class="common-wrap" v-if="externalAddShow">
    <h3>开票到账信息</h3>
    <a-form :form="form">
      <a-form-item label="编号" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入编号" v-decorator="[
          '编号',
          {rules: [{ required: true, message: '请输入编号' }]}
        ]" />
      </a-form-item>
      <a-form-item label="名称" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入名称" v-decorator="[
          '名称',
          {rules: [{ required: true, message: '请输入名称' }]}
        ]" />
      </a-form-item>
      <a-form-item label="地址" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入地址" v-decorator="[
          '地址',
          {rules: [{ required: true, message: '请输入地址' }]}
        ]" />
      </a-form-item>
      <a-form-item label="电话" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入电话" v-decorator="[
          '电话',
          {rules: [{ required: true, message: '请输入电话' }]}
        ]" />
      </a-form-item>
      <a-form-item label="营业执照号码" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入营业执照号码" v-decorator="[
          '营业执照号码',
          {rules: [{ required: true, message: '请输入营业执照号码' }]}
        ]" />
      </a-form-item>
      <a-form-item label="公司负责人" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入公司负责人" v-decorator="[
          '公司负责人',
          {rules: [{ required: true, message: '请输入公司负责人' }]}
        ]" />
      </a-form-item>
      <a-form-item label="公司联系方式" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入公司联系方式" v-decorator="[
          '公司联系方式',
          {rules: [{ required: true, message: '请输入公司联系方式' }]}
        ]" />
      </a-form-item>
      <a-form-item>
        <div class="sumbitButton">
          <a-button type="primary" class="buttonColorGreen" size="large">提交</a-button>
          <a-button class="buttonColorWhite" size="large" @click="cancel">取消</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  props: {
    externalAddShow: Boolean
  },
  data() {
    return {
      form: this.$form.createForm(this)
    }
  },
  methods: {
    cancel() {
      this.$emit('update:externalAddShow', false)
    }
  }
}
</script>

<style>
h3 {
  margin-bottom: 25px;
}
.ant-input {
  width: 300px;
}
.sumbitButton {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}
.sumbitButton button {
  margin: 20px 30px;
}
</style>

